import React, {useEffect, useReducer, useRef} from 'react';
import store from "./store";
import {addGoodsList} from "./store/slices/goods";
import {useForceUpdate} from "./hooks";
import {useLocation} from "react-router-dom";
function App() {
    const goodsNameRef = useRef();
    const goodsPriceRef = useRef();
    // 函数组件如何实现类组件中的强制更新？
    const forceUpdate = useForceUpdate();
    useEffect(function(){
        const unSubscribe = store.subscribe(forceUpdate);
        return function(){
            unSubscribe();
        }
    },[])
    return (
        <div>
            <h3>添加商品</h3>
            <form>
                <p>商品名称：<input ref={goodsNameRef} placeholder={"请输入商品名称"} type="text"/></p>
                <p>商品价格：<input ref={goodsPriceRef} placeholder={"请输入商品价格"} type="text"/></p>
                <button onClick={e=>{
                    e.preventDefault();
                    const goodsName = goodsNameRef.current.value.trim();
                    const goodsPrice = goodsPriceRef.current.value.trim()/1;
                    if(goodsName && goodsPrice) {
                        store.dispatch(addGoodsList({goodsName,goodsPrice}))
                        document.querySelector("form").reset();
                    }

                }}>提交</button>
                <hr/>
                {
                    store.getState().goods.goodsList.map(info=>(
                        <React.Fragment key={info.id}>
                            <h3>{info.goodsName}</h3>
                            <h3>${info.goodsPrice.toFixed(2)}</h3>
                            <hr/>
                        </React.Fragment>
                    ))
                }
            </form>
        </div>
    );
}

export default App;